<template>
    <template v-for="(item,index) in msgList" :key="index">
        <template v-if="msgList.length != 0 && item.message != null && (item.message.author.role == 'user' || item.message.author.role == 'assistant')">
            <div class="talkItemStyle" :style="item.message.author.role == 'user'?'background-color: rgb(255, 255, 255);':''">
                <div class="iconStyle">
                    <svg class="userIconStyle" v-if="item.message.author.role == 'user'" t="1697970893847" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9315" width="200" height="200"><path d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z" fill="#cdcdcd" p-id="9316"></path></svg>
                    <div :ref="`robotLottieRef`" v-else class="robotIconStyle"></div>
                </div>
                <span v-html="item.message.content.parts[0]" class="contentStyle"></span>
            </div>
        </template>
    </template>
    <!-- <button @click="testBtn">测试按钮</button> -->
</template>
<script setup>
import lottie from "lottie-web";
import { onMounted, ref,getCurrentInstance,watch,nextTick} from 'vue'
const props = defineProps(['msgList'])
const { proxy } = getCurrentInstance()

const testBtn = ()=>{
}

let msgOldListLengthCache = 0
watch(() => props.msgList, (newVal, oldVal) => {
    if(newVal.length == 0 || (newVal.length != msgOldListLengthCache && newVal[newVal.length - 1].message.author.role == 'assistant')){
        nextTick(() => {
            // 在下一个 DOM 更新周期后执行
            msgOldListLengthCache = newVal.length
            let refList = proxy.$refs[`robotLottieRef`]
            if(refList.length != 0){
                createLottieImgList(refList)
            }
        });
    }
},{ deep: true});


let lotListArr = []
const createLottieImgList = (val)=>{
    for(let i = 0 + lotListArr.length; i < val.length ;i++){
        lotListArr.push()
        lotListArr[i] = lottie.loadAnimation({
            container: val[i], //渲染动画所需容器
            renderer: "svg",//动画渲染类型，svg/canvas/html
            loop: true,//是否循环播放，布尔值
            autoplay: false,//是否自动播放，布尔值
            path: robotJson // the path to the animation json
        })
        lotListArr[i].play()
    }
}

let robotJson = new URL('@/assets/lotties/robot.json', import.meta.url).href
onMounted(()=>{

})
</script>
<style scoped lang="scss">
.talkItemStyle{
    padding: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    min-height:40px;
    background-color: #f7f7f8;
    font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    display: flex;
    .iconStyle{
        width: 13%;
        display: flex;
        // flex-direction: column;//内容垂直排列
        // align-items: center;//垂直居中
        justify-content: center;//水平居中
        .robotIconStyle{
            background-color: white;
            height: 35px;
            width: 35px;
            border-radius: 10px;
            box-shadow: 0px 0px 8px -3px rgb(142, 43, 255);
            box-shadow: 0px 0px 8px -3px rgb(82, 82, 82);
        }
        .userIconStyle{
            height: 35px;
            width: 35px;
            border-radius: 10px;
            box-shadow: 0px 0px 8px -3px rgb(20, 122, 255);
        }
    }
    .contentStyle{
        line-height: 26px;
        margin-left: 8px;
        width: 87%;
    }
}
</style>